<style>
    #shopList {
        width: 76%;
        margin: 0px auto;
    }

    #shopList .header {
        display: flex;
        align-items: center;
        height: 66px;
        padding: 0 0px 0px 11px;
        font-size: 18px;
        color: #333;
    }

    #shopList .header span {
        flex-grow: 1;
        margin-left: 20px;
        font-size: 16px;
        color: #000;
    }

    #shopList .header img {
        width: 160px;
    }

    #shopList .filterBar {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        color: #333;
        background: #F5F5F5;
        border: 1px solid #DDDEE0;
        padding-right: 15px;
        font-size: 12px;
        box-sizing: border-box;
    }

    #shopList .filterBar .item {
        width: 70px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #DDDEE0;
        border-left-color: transparent;
        cursor: pointer;
        box-sizing: border-box;
        user-select: none;
    }

    #shopList .filterBar .item:hover {
        background: #fff;
        color: #f00581;
        border-color: #f00581;
    }

    #shopList .filterBar .item.select {
        background: #fff;
        color: #f00581;
    }

    #shopList .filterBar .input {
        display: flex;
        align-items: center;
        flex-grow: 1;
        margin-left: 15px;
    }

    #shopList .filterBar .input input {
        width: 70px;
        height: 24px;
        margin-right: 8px;
    }

    #shopList .filterBar .input button {
        width: 36px;
        height: 20px;
        background: #f00581;
        color: #f6f7f9;
        font-size: 12px;
        padding: 3px 3px;
        box-sizing: content-box;
        cursor: pointer;
    }

    #shopList .filterBar .normal {
        font-size: 14px;
    }

    #shopList .filterBar .normal .pink {
        color: #f00581;
    }

    #shopList .cardlist {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 10px auto;
    }

    #shopList .cardlist .card {
        width: 24%;
        margin-right: 1%;
        margin-bottom: 1%;
        border: 1px solid #DDDEE0;
    }

    #shopList .cardlist .card > img {
        width: 100%;
    }

    #shopList .cardlist .card:nth-child(4n) {
        margin-right: 0px;
    }

    #shopList .cardlist .card:hover {
        border-color: #f0058180;
        cursor: pointer;
    }

    #shopList .cardlist .purchase {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    #shopList .cardlist .purchase .cheep {
        width: 40px;
        height: 17px;
        background-image: linear-gradient(270deg, #e456ff 0, #ff31a3 100%);
        background-color: #ff38c0;
        border-radius: 10px;
        color: white;
        text-align: center;
        font-size: 12px;
        padding: 2px 3px;
    }

    #shopList .cardlist .purchase .price {
        font-size: 23px;
        font-weight: bolder;
        margin-left: 5px;
    }

    #shopList .cardlist .purchase .origin {
        color: #999;
        text-decoration: line-through;
        margin-left: 8px;
        font-size: 14px;
    }

    #shopList .cardlist .purchase .reduce {
        color: #999;
        margin-left: 8px;
        font-size: 14px;
    }

    #shopList .cardlist .title {
        display: -webkit-box;
        width: 90%;
        color: #666;
        font-size: 12px;
        padding: 5px 10px;
        -webkit-box-orient: vertical;
        -webkit-box-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<section id="shopList">
    <!--筛选头部-->
    <div class="header" id="titles">
        <p>唯品会特卖商品-超值...</p>
        <span><b>3</b>折起</span>
        <img src="./static/icon-collect.png">
    </div>
    <!--筛选条-->
    <div class="filterBar">
        <div class="item select" id="normal">综合</div>
        <div class="item" id="seller">销量</div>
        <div class="item" id="price">价格</div>
        <div class="item" id="reduce">折扣</div>
        <div class="input">
            <form name="filter">
                <input name="lower" type="text" value="￥" placeholder="￥" autocomplete="off"/>--
                <input name="upper" type="text" value="￥" placeholder="￥" autocomplete="off"/>
                <button name="confirm" type="button">确定</button>
                <button name="clear" type="button">清空</button>
            </form>
        </div>
        <span class="normal"><span class="pink">200</span>件商品</span>
    </div>
    <script>
        $('.filterBar').on('click', '.item', function () {
            $('.filterBar .item').removeClass('select')
            $(this).addClass('select')
        })
    </script>
    <!--商品列表-->
    <div class="cardlist">

    </div>
    <!--分页器-->
    <div class="selectPage">

    </div>
</section>
<script>
    $(function () {
        var router = location.href.split('/').pop()
        var originhash = location.hash
        var hash = originhash.split('=')[1]
        var msg = new Messgebox()
        if (router === 'shoplist.html') {
            msg.show({
                type: 'error',
                msg: '非法闯入',
                timer: 2000,
            })
            setTimeout(() => {
                location.href = './index.html'
            }, 1000)
            return
        }
        if (router.indexOf('titles') >= 0||originhash==='#vip') {
            window.history.back()
            setTimeout(() => {
                window.location.reload()
            }, 200)
            return
        }

        var currentPage = 1, datalist = [], origin = []
        axios.get(`./static/api/vip/${hash}.json`).then(res => {
            // console.log('当前数据：', res.data.data)
            datalist = res.data.data
            new pageManager(5, Math.ceil(datalist.length / 40), function (page) {
                console.log('当前选中第', page, '页')
                currentPage = page
                loadData(page)
            })
            ///解析数据功能
            parseData()
            //排序功能
            sortData()
            //筛选功能
            filterData()
        })

        function sortData () {
            //恢复原始数据
            $('.filterBar #normal').on('click', function () {
                axios.get(`./static/api/vip/${hash}.json`).then(res => {
                    datalist = res.data.data
                    loadData(currentPage)
                    msg.show({
                        type: 'normal',
                        msg: '综合排序（默认排序）',
                        timer: 2000,
                    })
                })
            })
            //按照销量排序
            $('.filterBar #seller').on('click', function () {
                datalist = datalist.sort((a, b) => {
                    return b.name.length - a.name.length
                })
                loadData(currentPage)
                msg.show({
                    type: 'normal',
                    msg: '销量排序（从高到低）',
                    timer: 2000,
                })
            })
            //按照价格排序
            $('.filterBar #price').on('click', function () {
                datalist = datalist.sort((a, b) => {
                    return parseInt(a.price.slice(1)) - parseInt(b.price.slice(1))
                })
                loadData(currentPage)
                msg.show({
                    type: 'normal',
                    msg: '价格排序（从低到高）',
                    timer: 2000,
                })
            })
            //按照折扣排序
            $('.filterBar #reduce').on('click', function () {
                datalist = datalist.sort((a, b) => {
                    return parseInt(a.reducetext) - parseInt(b.reducetext)
                })
                loadData(currentPage)
                msg.show({
                    type: 'normal',
                    msg: '折扣排序（从高到低）',
                    timer: 2000,
                })
            })
        }

        //筛选数据
        function filterData () {
            $('.filterBar button[name=\'confirm\']').on('click', function () {
                // console.log(filter.lower.value, filter.upper.value)
                var lower = filter.lower.value.indexOf('￥') >= 0 ? filter.lower.value.slice(1) : filter.lower.value
                var upper = filter.upper.value.indexOf('￥') >= 0 ? filter.upper.value.slice(1) : filter.upper.value
                lower = parseInt(lower)
                upper = parseInt(upper)
                if (lower == 0 || upper == 0 || lower == '' || upper == '') {
                    return
                }
                let filterdata = datalist.filter(item => parseInt(item.price.slice(1)) >= lower && item.price.slice(1) <= upper)
                renderData(filterdata)
                msg.show({
                    type: 'normal',
                    msg: '筛选数据成功，点击清空恢复！',
                    timer: 2000,
                })
            })
            //还原加载
            $('.filterBar button[name=\'clear\']').on('click', function () {
                axios.get(`./static/api/vip/${hash}.json`).then(res => {
                    datalist = res.data.data
                    loadData(currentPage)
                    msg.show({
                        type: 'normal',
                        msg: '列表渲染成功',
                        timer: 2000,
                    })
                })
            })
        }

        //解析数据（这些数据准备传到详情页）
        function parseData () {
            $('#shopList .cardlist').on('click', '.card', function () {
                console.log(this)
                let data = {}
                let img = $(this).find('img').attr('data-src')
                let name = $(this).find('.title').html()
                let price = $(this).find('.price').html().slice(1)
                let origin = $(this).find('.origin').html()
                let reduce = $(this).find('.reduce').html()
                data.price = price
                data.origin = origin
                data.reduce = reduce
                data.img = img
                data.name = name
                data.type = hash
                console.log(data)
                window.open('./shopDetail.html#data=' + encodeURI(JSON.stringify(data)))
            })
        }

        //分页加载数据
        function loadData (page) {
            var pagelist = []
            for (let i = (page - 1) * 40; i < page * 40; i++) {
                //这里进行拼接和渲染
                if (datalist[i] === undefined) {
                    break
                }
                pagelist[i] = datalist[i]
            }
            renderData(pagelist)
            $('.selectPage a').each((index, item) => {
                item.setAttribute('href', '#titles')
            })
        }

        //渲染数据
        function renderData (data) {
            var res = data.map(item => `<div class="card">
            <img data-src="${item.imgsrc}" src="./static/loading.gif">
            <div class="purchase">
                <div class="cheep">特卖价</div>
                <b class="price">${item.price}</b>
                <span class="origin">${item.reduce}</span>
                <span class="reduce">${item.reducetext}</span>
            </div>
            <p class="title">${item.name}</p>
        </div>`).join('')
            setTimeout(() => {
                $('#shopList .cardlist').html(res)
                setTimeout(() => {
                    new lazyLoad('.cardlist img')
                }, 800)
            }, 300)
        }
    })
</script>